import React, { Component } from 'react';
import { Form, Input, Button, PageHeader, message, Col, Row,  } from 'antd';
import { CaretDownOutlined, AppstoreTwoTone, } from '@ant-design/icons';
import styles from './index.less'
/*eslint-disable*/
const { TextArea } = Input

class EntryForm extends Component {
    constructor (props) {
        super(props);
        this.state = {
            form: {
                num: "21345-213"
            },
            loading: false
        }
    }
    //校验通过提交
    submit = () => {
        this.setState({ loading: true })
        console.log(this.props)
        this.props.handleOk()
    }
    //校验失败
    onFinishFailed = (err) => {
        // this.setState({ loading: true })
        console.log(err.values)
        message.warning("请填写完整！")
    }

    handleCancel = () => {
        this.props.handleCancel()
    }
    //表单字段改变
    handleValuesChange = (changedValues, allValues) => {
        // console.log(allValues)
        this.setState({
            form: allValues
        },
            () => {
                console.log(this.state.form)
            }
        )
    }

    render() {
        let { form, loading } = this.state;

        const routes = [
            { breadcrumbName: '资源基本信息录入', },
        ]

        return (
            <div className={ styles.all }>
                <div className={ styles.pagetop }>
                    <span className={ styles.pageheadericon }>
                        <AppstoreTwoTone />
                    </span>
                    <span className={ styles.pageheader }>
                        <PageHeader
                            backIcon="true"
                            breadcrumb={ { routes } }
                            onBack={ () => window.history.back() }
                        />
                    </span>
                </div>
                <div className={ styles.form }>
                    <Form
                        name="form"
                        autoComplete="off"
                        labelAlign="right"
                        onFinish={ this.submit }
                        onFinishFailed={ this.onFinishFailed }
                        // scrollToFirstError={ true }
                        onValuesChange={ this.handleValuesChange }
                    >
                        <div style={ { background: "#F2F2F2", padding: "20px" } }>
                            <div style={ { background: "white" } }>
                                <div style={ { height: "8px" } }></div>
                                {/* <div className={ styles.formChildText }><CaretDownOutlined />标准简介</div> */ }
                                <div className={ styles.formItem }>
                                    <Row gutter={ 200 }>
                                        <Col span={ 11 }>
                                            <Form.Item name="title" label="资源标题"
                                                rules={ [ { required: true, message: '请输入资源标题', }, ] }>
                                                <Input placeholder="请输入资源标题" value={ form.title } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 11 }>
                                            <Form.Item name="childtitle" label="资源副标题"
                                                rules={ [ { required: true, message: '请输入资源副标题', }, ] }>
                                                <Input placeholder="请输入资源副标题" value={ form.childtitle } />
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={ { marginTop: "10px", background: "white" } }>
                                <div style={ { height: "8px" } }></div>
                                <div className={ styles.formChildText }><CaretDownOutlined />资源基本信息</div>
                                <div className={ styles.formItem }>
                                    <Row gutter={ 80 }>
                                        <Col span={ 8 }>
                                            <Form.Item name="title" label="所属科目"
                                                rules={ [ { required: true, message: '请填写所属科目', }, ] }>
                                                <Input placeholder="请输入所属科目" value={ form.title } />
                                            </Form.Item>
                                            <Form.Item name="num" label="资源发布者"
                                                rules={ [ { required: true, message: '请填写资源发布者', }, ] }>
                                                <Input placeholder="请输入资源发布者" value={ form.num } />
                                            </Form.Item>
                                            <Form.Item name="publishdate" label="发布日期"
                                                rules={ [ { required: true, message: '请填写发布日期', }, ] }>
                                                <Input placeholder="请输入发布日期" value={ form.publishdate } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="childtitle" label="资源大小"
                                                rules={ [ { required: true, message: '请填写资源大小', }, ] }>
                                                <Input placeholder="请输入资源大小" value={ form.childtitle } />
                                            </Form.Item>
                                            <Form.Item name="type" label="资源所属部门"
                                                rules={ [ { required: true, message: '请填写资源所属部门', }, ] }>
                                                <Input placeholder="请输入资源所属部门" value={ form.type } />
                                            </Form.Item>
                                            <Form.Item name="actiondate" label="数据格式"
                                                rules={ [ { required: true, message: '请填写数据格式', }, ] }>
                                                <Input placeholder="请输入数据格式" value={ form.actiondate } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="actionunit" label="使用量"
                                                rules={ [ { required: true, message: '请填写使用量', }, ] }>
                                                <Input placeholder="请输入使用量" value={ form.actionunit } />
                                            </Form.Item>
                                            <Form.Item name="branch" label="适用范围"
                                                rules={ [ { required: true, message: '请填写适用范围', }, ] }>
                                                <Input placeholder="请输入适用范围" value={ form.branch } />
                                            </Form.Item>
                                            <Form.Item name="enddate" label="关键字"
                                                rules={ [ { required: true, message: '请填写关键字', }, ] }>
                                                <Input placeholder="请输入关键字" value={ form.enddate } />
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={ 24}>
                                            <Form.Item name="branch" label="资源摘要"
                                                rules={ [ { required: true, message: '请输入资源摘要', }, ] }>
                                                <TextArea placeholder="请输入资源摘要" rows={ 4 } placeholder="请输入资源摘要" />
                                            </Form.Item>
                                        </Col>
                                        <Col span={7}>
                                            <Form.Item name="branch" label="资质机构"
                                                rules={ [ { required: true, message: '请输入资质机构', }, ] }>
                                                <Input placeholder="请输入资质机构" value={form.branch}/>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={ { marginTop: "10px", background: "white" } }>
                                <div style={ { height: "8px" } }></div>
                                <div className={ styles.formChildText }><CaretDownOutlined />基础标签</div>
                                <div className={ styles.formItem }>
                                    <Row gutter={ 80 }>
                                        <Col span={ 8 }>
                                            <Form.Item name="chinaclassify" label="元数据表ID"
                                                rules={ [ { required: true, message: '请输入元数据表ID', }, ] }>
                                                <Input placeholder="请输入元数据表ID" value={ form.chinaclassify } />
                                            </Form.Item>
                                            <Form.Item name="chinaclassify" label="资源更新者"
                                                rules={ [ { required: true, message: '请输入资源更新者', }, ] }>
                                                <Input placeholder="请输入资源更新者" value={ form.chinaclassify } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="internationalclassfy" label="表英文名称"
                                                rules={ [ { required: true, message: '请输入表英文名称', }, ] }>
                                                <Input placeholder="请输入表英文名称" value={ form.internationalclassfy } />
                                            </Form.Item>
                                            <Form.Item name="internationalclassfy" label="更新时间"
                                                rules={ [ { required: true, message: '请输入更新时间', }, ] }>
                                                <Input placeholder="请输入更新时间" value={ form.internationalclassfy } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="internationalclassfy" label="表中文名称"
                                                rules={ [ { required: true, message: '请输入表中文名称', }, ] }>
                                                <Input placeholder="请输入表中文名称" value={ form.internationalclassfy } />
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={ { marginTop: "10px", background: "white" } }>
                                <div style={ { height: "8px" } }></div>
                                <div className={ styles.formChildText }><CaretDownOutlined />数据量</div>
                                <div className={ styles.formItem }>
                                    <Row gutter={80}>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="访问量"
                                                rules={ [ { required: true, message: '访问量', }, ] }>
                                                <Input placeholder="请输入访问量" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="收藏量"
                                                rules={ [ { required: true, message: '收藏量', }, ] }>
                                                <Input placeholder="请输入收藏量" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="下载量"
                                                rules={ [ { required: true, message: '下载量', }, ] }>
                                                <Input placeholder="请输入下载量" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={ { marginTop: "10px", background: "white" } }>
                                <div style={ { height: "8px" } }></div>
                                <div className={ styles.formChildText }><CaretDownOutlined />数据信息</div>
                                <div className={ styles.formItem }>
                                    <Row gutter={80}>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="数据集名称"
                                                rules={ [ { required: true, message: '请输入数据集名称', }, ] }>
                                                <Input placeholder="请输入数据集名称" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="关键字"
                                                rules={ [ { required: true, message: '请输入关键字', }, ] }>
                                                <Input placeholder="请输入关键字" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                        <Col span={ 8 }>
                                            <Form.Item name="summarise" label="版本号"
                                                rules={ [ { required: true, message: '请输入版本号', }, ] }>
                                                <Input placeholder="请输入版本号" value={ form.summarise } />
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            
                            <div style={ { textAlign: "left", margin: "20px 0" } }>
                                {/* <Button onClick={ this.handleCancel }>取消</Button> */ }
                                <Button type="primary" htmlType="submit" loading={ loading }>录入</Button>
                            </div>
                        </div>
                    </Form>
                </div>
            </div>
        );
    }
}

export default EntryForm;